<template>
	<view class="container" v-if="show">
		<view class="scroll-box evaluate">
			<scroll-view scroll-Y="true" class="nav-left">
				<block v-for="(item,index) in items" :key="item.id">
					<view class="nav-left-items" :class="pIndex==index?'selected':''"
						 @click="changeCategory(index)">
						{{item.name}}
					</view>
		
				</block>
			</scroll-view>
			<scroll-view scroll-y='true' class="nav-right" :scroll-into-view="toView">
				<view class="list-item">
					<view class="item" @click='select(-1)'>
						<text class="cate-name">全部</text>
					</view>
					<block v-if="items[pIndex].sons.length > 0" v-for="(son,sindex) in items[pIndex].sons">
						<view class="item" @click='select(sindex)'>
							<text class="cate-name">{{son.name}}</text>
						</view>
					</block>
				</view>
				<!-- <view v-else>
					暂无下级
				</view> -->
			</scroll-view>
		</view>
		<view class="close-select">
			<view @click="close">关闭</view>
		</view>
		<view class="maskLayer" @click.stop="close"></view>
	</view>
</template>

<script>
	
	import {
		projectList
	} from '@/api/apply.js';
	import helper from '@/utils/helper.js';
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				show: false,
				items: [
				],
				current: 0,
				page:1,
				pageSize:15,
				keyword:'',
				pIndex:0
			}
		},
		created() {
			this.getMember();
		},
		onReady() {
			
		},
		watch: {


		},
		filters: {
			//转整
			toInt(val) {
				return helper.toInt(val);
			}
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			select: function(index) {
				var parent = this.items[this.pIndex];
				if(index == -1){
					var child = {id:'','name':'全部'};
				}else{
					var child = this.items[this.pIndex].sons[index];
				}
				var e = {
					parent,
					child
				}
				this.close();
				this.$emit('selectProject',e);
				
			},
			/*切换分类*/
			changeCategory: function(index) {
				this.pIndex = index;
			},
			reset(){
				this.page = 1;
				this.items = [];
			},
			search(){
				this.reset();
				this.getMember(true);
			},
			getMember:function(showLoading = false){
				var that = this;
				var param={
					page:this.page,
					'per-page':this.pageSize,
					
					realname:this.keyword
				}
				if(showLoading){
					uni.showLoading({
						title:'加载中'
					})
				}
				this.$http.get(`${projectList}`, param)
					.then(async data => {
						uni.hideLoading();
						if (data.code == 200) {
							var data = data.data.items;
							that.items = data;
						}
						console.log(that.items);
					});
			},
		}
	}
</script>

<style lang="scss">
	.scroll-box{display: flex;justify-content: space-between;}
	.evaluate {
		
		background-color: #fff;
		position: fixed;
		width: 80%;
		z-index: 99;
		top: 10vh;
		max-height: 85vh;
		left: 10%;
		padding: 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: scroll;
		//.top{position: fixed;top:0;}
		.search{
			border:1px solid #ececec; display: flex;justify-content: space-between;align-items: center;
			input{padding-left: 20rpx;}
			.search-btn{
				padding: 20rpx 20rpx 20rpx 0;
			}
		}
		
		/*左侧边栏  */
		.nav-left {
			left: 0;
			height: calc(100% - 222rpx);
			width: 160rpx;
			background-color: #f9f9f9;
			
			z-index: 8;
		}
		
		.nav-left .nav-left-items {
			display: block;
			width: 100%;
			font-size: 26rpx;
			line-height: 1.2;
			color: #333;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f9f9f9;
			// text-overflow: ellipsis;
			// white-space: nowrap;
			overflow: hidden;
			text-align: center;
			border-bottom: 1px solid #ececec;
		}
		
		/*左侧边 end  */
		/*右边商品分类列表 */
		.nav-right {
			display: flex;
			flex-wrap: wrap;
			width: calc(100% - 170rpx);
			padding: 20rpx;
			box-sizing: border-box;
			padding-bottom: 0;
			// #ifdef H5
			height: calc(100vh - 230rpx);
			// #endif
			box-sizing: border-box;
			.item{border:1px solid #ececec;padding: 10rpx 30rpx;border-radius: 10rpx;margin-right: 30rpx;margin-bottom: 30rpx;}
		}
		
		.nav-right .list-item {
			margin-bottom: 20rpx;
			width: 560rpx;
			display: flex;
			
		}
		.selected{color: #ff6600 !important;}
	}
</style>